<template>
  <div id="container"></div>
</template>

<script>
export default {
  props: ["hotelData"],

  watch: {
    hotelData() {
      console.log(this.hotelData);
      let hotels = this.hotelData;
      console.log(hotels);
      window.onLoad = function () {
        var map = new AMap.Map("container", {
          zoom: 13,
          center: [hotels[0].location.longitude, hotels[0].location.latitude],
        });
        let hotelMarkers = [];
        console.log(hotels);
        hotels.forEach((hotel) => {
          var marker = new AMap.Marker({
            position: [hotel.location.longitude, hotel.location.latitude],
            title: hotel.name,
            zIndex:hotel.id
          });
          hotelMarkers.push(marker);
        });

        map.add(hotelMarkers);
      };
      var url =
        "https://webapi.amap.com/maps?v=1.4.15&key=e5dacc2c74df594a9332bd836b30b897&callback=onLoad";
      var jsapi = document.createElement("script");
      jsapi.charset = "utf-8";
      jsapi.src = url;
      document.head.appendChild(jsapi);
    },
  },
  mounted() {
    // console.log(this.hotelData);
  },
};
</script>

<style lang="less" scoped>
#container {
  width: 420px;
  height: 260px;
}
</style>